<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabs-main {
            display: flex;
            width: 800px;
            margin: 50px auto;
            justify-content: space-around;
            border: 5px solid #ddd;
            padding: 10px;
        }

        .tab1,
        .tab2 {
            width: 200px;
        }

        nav {
            display: flex;
        }

        nav a {
            display: block;
            flex: 1;
            background: #ddd;
            height: 30px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            color: #fff;
            background: #369;
        }
        nav a:nth-of-type(1){
            background: chocolate;
        }
        section:nth-of-type(1){
            background: aquamarine;
        }
        section:nth-of-type(2){
            background: #458;
        }
        section {
            padding: 10px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <main class="tabs-main">
        <main class="tab1">
            <nav>
                <a href="javascript:;">tab1</a>
                <a href="javascript:;">tab2</a>
            </nav>
            <section>内容1</section>
            <section>内容2</section>
        </main>
        <main class="tab2">
            <nav>
                <a href="javascript:;">tab1</a>
                <a href="javascript:;">tab2</a>
            </nav>
            <section>内容1</section>
            <section>内容2</section>
        </main>
        </div>
        <script>
            // 继承封装
            function extend(sub, sup) {
                sub.prototype = Object.create(sup.prototype);
                Object.defineProperty(sub.prototype, 'constructor', {
                    value: sub,
                    enumerable: false
                })
            }
            // 动作
            function Animation(){}
            // 显示
            Animation.prototype.show = function(){
                this.style.display = 'block';
            }
            //  隐藏
            Animation.prototype.hide = function(){
                this.style.display = 'none';
            }
            Animation.prototype.background = function(color){
                this.style.backgroundColor = color;
            }

            function Tab(el){
                this.tab = document.querySelector(el);
                this.links = this.tab.querySelectorAll('a');
                this.sections = this.tab.querySelectorAll('section');
            }
            // Tab继承效果类Animation
            extend(Tab,Animation);
            // 启动 绑定事件
            Tab.prototype.run = function(){
                this.bindEvent();
                // 初始化事件执行
                this.reset();
                this.actions(0);
            }
            Tab.prototype.bindEvent = function(){
                this.links.forEach((el,i)=>{
                    el.addEventListener('click',()=>{
                        this.reset();
                        this.actions(i);
                    })
                });
            }
            Tab.prototype.actions = function(i){
                this.background.call(this.links[i],'chocolate');
                this.show.call(this.sections[i]);
            }
            Tab.prototype.reset = function(){
                this.links.forEach((item,i)=>{
                    this.background.call(item,'#369');
                    this.hide.call(this.sections[i]);
                })
            }
            
            new Tab('.tab1').run()
            new Tab('.tab2').run()
        </script>
</body>

</html>